<template>
    <div class="content">
      <div class="content-head">
        <el-form :inline="true" :model="formData" label-position="left">
          <el-form-item label="选择日期" label-width="70px" class="form-item">
            <el-date-picker v-model="formData.startAndEndDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" size="mini" :clearable="false" style="width:220px;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset_btn">重置</el-button>
            <el-button type="success" size="mini" icon="el-icon-search" @click="search_btn">查询</el-button>
            <el-button type="info" size="mini" icon="el-icon-download" :loading="exportBtnLoading" @click="export_btn">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-table">
        <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" :max-height="tableMaxHeight" class="content-table-item">
          <el-table-column prop="actualOrTheoreticalData" label="理论值/实际值" width=""></el-table-column>
          <el-table-column prop="workerCount" label="报工人数" width=""></el-table-column>
          <el-table-column prop="output" label="产出" width=""></el-table-column>
          <el-table-column prop="laborCost" label="人工成本" width=""></el-table-column>
          <el-table-column prop="costPerUnit" label="单件成本" width=""></el-table-column>
          <el-table-column prop="equipmentDepreciation" label="设备折旧" width=""></el-table-column>
          <el-table-column prop="depreciationPerUnit" label="单件折旧" width=""></el-table-column>
          <el-table-column prop="toolingCost" label="刀具费" width=""></el-table-column>
          <el-table-column prop="toolingCostPerUnit" label="单件刀具费" width=""></el-table-column>
        </el-table>
      </div>
      <div class="content-footer" v-if="false">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { reqSummaryTableReport, reqSummaryTableReportExport } from "@/api/summarySheet.js";
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  export default {
    name:"summarySheet",  //生产成本总表
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          startAndEndDate:[this.formatDate(null,1),this.formatDate(null,1)]
        },
        tableData:[],
        tableLoading:false,
        tableMaxHeight:450,
        currentPage:1,
        pageSize:10,
        total:0,
        exportBtnLoading:false
      }
    },
    mounted(){
      this.getSummaryTableList();
      //精致环境下进行自动旋转
      //autoOrientation();
      this.calculateTableMaxHeight();
      document.title = "生产成本总表";
    },
    methods:{
      getSummaryTableList(){
        const { startAndEndDate } = this.formData;
        const parameter = {startDate:startAndEndDate[0],endDate:startAndEndDate[1]};
        reqSummaryTableReport(parameter).then(response => {
          if(response.data.code === 200){
            this.tableData = response.data.data;
          }
          console.log('获取生产成本表api',response);
        }).catch(error => {
          this.$message.error("生产成本列表数据获取失败");
          console.log('获取生产成本表api',error);
        })
      },
      reset_btn(){
        const filter = this.formData;
        filter.startAndEndDate = [this.formatDate(null,1),this.formatDate(null,1)];
        this.getSummaryTableList();
      },
      search_btn(){
        const { startAndEndDate } = this.formData;
        if(startAndEndDate.length !== 2){
          this.$message({type:"warning",message:"选择起始日期后进行查询"});
          return;
        }
        this.getSummaryTableList();
      },
      export_btn() {
        const { startAndEndDate } = this.formData;
        const parameters = { startDate:startAndEndDate[0],endDate:startAndEndDate[1] };
        this.$confirm('即将导出当前内容,数据将根据筛选条件进行过滤', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
          .then(async () => {
              this.exportBtnLoading = true;
              let res = await reqSummaryTableReportExport(parameters);
              if (res.status === 200) {
                let blob = res.data;
                let url = window.URL.createObjectURL(blob,{type: 'application/zip'});
                const aLink = document.createElement('a');
                aLink.href = url;
                let timestamp = new Date().getTime();
                aLink.setAttribute('download', '生产成本总表_' + timestamp);
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink);
                this.$message.success('导出成功');
                this.exportBtnLoading = false;
              } else {
                this.$message.error('导出失败,请重试');
                this.exportBtnLoading = false;
              }
          }).catch(() => {
              this.$message({type: 'info', message: '已取消导出!'});          
          });
      },
      //分页器
      handleCurrentChange(curPage){
        this.currentPage = curPage;
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
      },
      //格式化时间
      formatDate(val,type){
        let date = null;
        val === null ? date = new Date() : date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(type === 0){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 1){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day);
        } else if (type === 2){
            return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 3){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
        }
      },
      addZero(val){
          return val > 9 ? val : "0" + val;
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".content-table");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 10;
        })
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.getMeterList();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.getMeterList();
          }
        }
      }
    }
  }
  </script>
  
  <style lang='scss' scoped>
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2% 5%;
    box-sizing: border-box;
  
    .content-head{
      flex: 1;
    }
    .content-table{
      flex: 9;
      margin: 10px 0;
    }
    .content-footer{
      display: flex;
      justify-content: flex-end;
    }
  }
  </style>